<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <meta name="renderer" content="webkit">
    <title>订单01</title>
    <!-- 公共样式 开始 -->
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../../fonts/iconfont.css">
    <script type="text/javascript" src="../../framework/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script src="../../framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
    <!-- 公共样式 结束 -->
</head>

<body>

<div class="demoTable">
    模糊订单号：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>
<!--表单-->
<table class="layui-hide" id="LAY_table_order" lay-filter="LAY_table_order"></table>

<!--工具栏-->
<script type="text/html" id="del">
    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
</script>

<!--所有自定义js-->
<script>
    layui.use('table', function () {
        var table = layui.table;

        //方法级渲染
        table.render({
            elem: '#LAY_table_order'
            , url: '/order/findAll'
            , cols: [[
                {checkbox: true, fixed: true}
                , {field: 'ordernum', title: '订单号', width: 200, fixed: 'left', unresize: true, sort: true}
                , {field: 'statusStr', title: '订单状态', width: 120, sort: true}
                , {field: 'paynum', title: '线上支付编号', width: 120}
                , {field: 'money', title: '已付金额', width: 90}
                , {field: 'deposit', title: '押金', width: 60}
                , {field: 'otherexp', title: '其他消费', width: 90}
                , {field: 'trueexp', title: '实际消费', width: 90}
                , {field: 'orderdate', title: '预定时间', width: 160, sort: true}
                , {field: 'day', title: '预定天数', width: 90}
                , {field: 'startdate', title: '入住时间', width: 160}
                , {field: 'enddate', title: '退房时间', width: 160}
                , {
                    field: 'user', title: '用户名', width: 90, templet: function (d) {
                        return d.user ? (d.user.uname || '') : '';
                    }
                }
                , {
                    field: 'staff', title: '操作员工', width: 90, templet: function (d) {
                        return d.staff ? (d.staff.sname || '') : '';
                    }
                }
                , {field: 'comment', title: '评价', width: 60}
                , {field: 'star', title: '评分', width: 60}
                , {field: 'remark', title: '备注', width: 60, edit: 'text'}
                , {fixed: 'right', title: '操作', toolbar: '#del', width: 150}
            ]]
            , id: 'orderReload'
            , page: true
            , height: 310
        });

        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');
                //执行重载 指定重载路径和参数
                table.reload('orderReload', {
                    url: '/order/findByOrdernum'
                    , where: {
                        //为输入字符 指定key
                        ordernum: demoReload.val()
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听行工具事件
        table.on('tool(LAY_table_order)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            }
        });
    });
</script>

</body>
</html>